<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击一个元素展开其全部内容，再点击收起内容</title>
    <link rel="stylesheet" type="text/css" href="normalize.css">
    <style>
        .planner-js {
            font-size: 0.65rem;
            color: #303030;
        }

        .planner-js h3 {
            padding-top: 0.3rem;
            line-height: 1.1rem;
        }

        .planner-js p {
            color: #888;
            line-height: 1.1rem;
        }

        .palnner-js-more {
            display: block;
            padding-right: 1rem;
            font-size: 0.55rem;
            color: #888;
            line-height: 1.5rem;
            text-align: right;
            background-image: url(images/planner_more.png);
            background-size: 10px 6px;
            background-repeat: no-repeat;
            background-position: right center;
        }

    </style>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
        //引入了jquery
        $(document).ready(function () {
//这个是第一次获取内容里面全部的字符串。赋值给变量
            var value = $("#spread-content").text();
//对内容里面的字符串进行截取，按照一定的个数进项截取，添加省略号
            $("#spread-content").text(value.substring(0, 44) + "...");
//点击展开元素
            $(".palnner-js-more").click(function (event) {
//获取只有一部分内容的div的高度
                var currentHeight = $("#spread-content").height();
//当点击元素时，判断高度，如果高度小于80px时，那么此时内容是被收缩起来的。
                if (currentHeight < 80) {
//因为此时内容是被收缩，点击的时候，就是要展开内容。所以要把全部字符串显示完全。
                    $("#spread-content").text(value);
//对此，把内容区域的高度相应的增高一些。
                    $("#spread-content").height("4rem");
//但是，并不是为内容有多少，内容区域的高度就有多高，所以出现滚动条
                    $("#spread-content").css("overflow", "auto");
//点击后，内容显示完全，下一步就是收起，所以设置为收起
                    $(this).text("收起");
//相应的图标的方向也发生了改变
                    $(this).css("background-image", "url(images/planner_less.png)");
                } else {
//因为此时内容是全部显示的，所以下面的是收起的内容的样式。
                    $("#spread-content").text(value.substring(0, 44) + "...");
                    $("#spread-content").height("2rem");
                    $("#spread-content").css("overflow", "hidden");
                    $(this).text("展开");
                    $(this).css("background-image", "url(images/planner_more.png)");
                }
            });
        });
    </script>
</head>
<body>

<div class="planner-js">
    <h3>简介</h3>
    <p id="spread-content" class="spread-content">我是内容，我是内容,54545456a asdfa asdf asdf ,asdf asdf,asdf asdf asdf ,asdf asdf as
        d, asdf asdf asdf ,asdf
        d, asdf asdf asdf ,asdf
        d, asdf asdf asdf ,asdf
        d, asdf asdf asdf ,asdf
        d, asdf asdf asdf ,asdf
        d, asdf asdf asdf ,asdf
    </p>
</div>
<span class="palnner-js-more">展开</span>

</body>
</html>